<template>
  <Wrapper v-bind:size="size">
    <!-- <div class="roll indicator-box" v-bind:style="indicateRoll">
      <img src="./img/horizon_back.svg" class="indicator-box" alt="">
      <div class="pitch indicator-box" v-bind:style="indicatePitch">
      <img src="./img/horizon_ball.svg" class="indicator-box" alt="">
      </div>
      <img src="./img/horizon_circle.svg" class="indicator-box" alt="">
    </div>
    <div class="mechanics indicator-box">
      <img src="./img/horizon_mechanics.svg" class="indicator-box" alt="">
      <img src="./img/fi_circle.svg" class="indicator-box" alt="">
    </div> -->
    <!-- 横滚角 -->
    <!-- 俯仰角 -->

    <!-- --2fe64f22
0
: 0;
    --0868a008: 1.65;
    --3318f05b: 0;
    --eca6afec: translate(-50%, -50%) rotate(0deg);
    --01d4bf3d: 16.5; -->

    <div class="instrument-container">
      <div class="bg">
        <div class="half sky"></div>
        <div class="half ground"></div>
        <div class="pointer-area">
          <div class="row" v-for="(item, index) in centerlineList" :key="index">
            <span>{{ item }}</span>
            <div class="center-line"></div><span>{{ item }}</span>
          </div>

          <!-- <div class="row"><span>10</span>
            <div class="center-line"></div><span>10</span>
          </div>
          <div class="row"><span>0</span>
            <div class="center-line middle"></div><span>0</span>
          </div>
          <div class="row"><span>-10</span>
            <div class="center-line"></div><span>-10</span>
          </div>
          <div class="row"><span>-20</span>
            <div class="center-line"></div><span>-20</span>
          </div> -->
        </div>
        <div class="scale"><img alt="仪表盘横滚角刻度" src="./img/pie-scale.svg"></div>
      </div>
      <div class="arrow"><img alt="指针" src="./img/pointer-header.svg"></div>
      <div class="aim"><img alt="瞄准" src="./img/aim.svg">
      </div>
    </div>


  </Wrapper>
</template>

<script>
import Wrapper from './Wrapper.vue'

const PITCH_BOUND = 30

export default {
  name: 'Attitude',
  components: {
    Wrapper
  },
  props: {
    size: {
      type: Number,
      default: 250
    },
    hgroll: {
      //横滚角度
      type: Number,
      default: 0
    },
    fypitch: {
      //俯仰角度
      type: Number,
      default: 0
    }
  },
  computed: {

    // indicatePitch: function () {
    //   let pitch = this.pitch;
    //   if (pitch > PITCH_BOUND) pitch = PITCH_BOUND;
    //   else if (pitch < -PITCH_BOUND) pitch = -PITCH_BOUND;
    //   return { top: (pitch * 0.68) + '%' };
    // }

    //  indicateRoll: function () {
    //   debugger
    //       return { transform: 'translate(-50%, -50%) rotate(' + this.roll + 'deg)' };
    //     },

  },
  watch: {
    hgroll: {
      //横滚角度
      handler(newVal) {
        // debugger
        console.log('监听横滚角1:', newVal);
        this.ybpscaledeg = newVal;//仪表盘角度 正数--右  负数--左
        this.zzhxscaledeg = newVal;//仪表盘遮罩横线角度 正数--右  负数--左
      },
      deep: true,
      immediate: true
    },
    fypitch: {
      //俯仰角度
      handler(newVal) {
        console.log('监听俯仰角2:', newVal);
        let xshu = null;
        let yshu = null;
        xshu = (this.zzhxscaledeg * -1) + 'deg';
        yshu = Number(newVal / 1.1) * 1 + 'px';
        //if(newVal!=-9.9) return;
        // debugger

        if (newVal > 0 && newVal < 10) {
          this.centerlineList = [30, 20, 10, 0, -10];
          yshu = -Number(newVal + 16.5) * 1 + 'px';
        } else

          if (newVal > 10) {
            this.centerlineList = [40, 30, 20, 10, 0];

            yshu = -Number(newVal / 1.3) * 1 + 'px';
          } else
            if (newVal <= -10 && newVal >= -14) {
              this.centerlineList = [10, 0, -10, -20, -30];

              yshu = Number(newVal / 4.4) * 1 + 'px';
            } else
              if (newVal <= -15) {
                this.centerlineList = [10, 0, -10, -20, -30];

                yshu = Number(newVal + 4.5) * 1 + 'px';
              } else if (newVal <= 0) {
                this.centerlineList = [20, 10, 0, -10, -20];

                yshu = Number(newVal * 1.65) * 1 + 'px';
              }


        // if (newVal <= -15) {
        //   this.centerlineList = [0, -10, -20, -30, -40];

        //   yshu = Number(newVal / 4.4) * 1 + 'px';
        // }



        this.hgpointerareatrans = `translate(-50%, calc(-50% + ${yshu})) rotate(${xshu})`;//俯仰角度数字 高度 以及角度
        this.ypitch = newVal;
        this.fuyjpointerdeg = newVal;
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      centerlineList: [20, 10, 0, -10, -20],
      ybpscaledeg: 0,//仪表盘角度 正数--右  负数--左
      zzhxscaledeg: 0,//仪表盘遮罩横线角度 正数--右  负数--左
      fuyjpointerdeg: 0,//俯仰角度数字 高度角度
      // fuyjpointerdeg:"translate(-50%, -50%) rotate(0deg)",//俯仰角度数字 高度 以及角度
      xroll: 0,
      ypitch: 0,
      hgpointerareatrans: "translate(-50%, -50%) rotate(0deg)",//俯仰角度数字 高度 以及角度
    };
  },
  methods: {
    getSignLabel(n) {
      // 判断字符是正数 负数  零
      switch (Math.sign(n)) {
        // case 1: return '正数';
        // case -1: return '负数';
        // default: return '零或非数值';
        case 1: return '1';
        case -1: return '-1';
        default: return '0';
      }
    }
  },


}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.instrument-container {
  width: 144px;
  height: 150px;
  // background: #1a1a1a;
  padding: 9px 6px;
  position: relative;

  .bg {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    position: relative;

    .sky {
      width: 264px;
      height: 132px;
      background: #313131;
      // transform: translate(-25%, calc(-50% + var(--2fe64f22) * var(--0868a008) * 1px)) rotate(calc(var(--3318f05b) * -1deg));
      transform: translate(-25%, calc(-50% + v-bind(fuyjpointerdeg) * 1.65 * 1px)) rotate(calc(v-bind(zzhxscaledeg) * -1deg));
      //  transform: translate(-25%, calc(-50% + 0 * v-bind(xroll) * 1px)) rotate(calc(0 * -1deg));
      transform-origin: 50% 100%;
      border-bottom: 1px solid #d8d8d8;
    }

    .ground {
      width: 264px;
      height: 132px;
      background: rgba(0, 0, 0, .4);
      //  transform: translate(-25%, calc(-50% + var(--2fe64f22) * var(--0868a008) * 1px)) rotate(calc(var(--3318f05b) * -1deg));
      transform: translate(-25%, calc(-50% + v-bind(fuyjpointerdeg) * 1.65 * 1px)) rotate(calc(v-bind(zzhxscaledeg) * -1deg));
      //   transform: translate(-25%, calc(-50% + 0 * v-bind(xroll)* 1px)) rotate(calc(0* -1deg));
      transform-origin: 50% 0;
    }

    .pointer-area {
      position: absolute;
      left: 50%;
      top: 50%;
      //  `transform: var(--eca6afec);`
      // transform: translate(-50%, -50%) rotate(0deg);
      // transform-origin: 50% 50%;
      //transform: v-bind(fuyjpointerdeg);

      // transform: translate(-50%, calc(-50% + v-bind(fuyjpointerdeg) *1.65* 1px)) rotate(calc(v-bind(zzhxscaledeg) * -1deg));
      //   transform: translate(-50%, calc((-50% + v-bind(fuyjpointerdeg)/4.3)* 1px)) rotate(calc(v-bind(zzhxscaledeg) * -1deg));
      transform: v-bind(hgpointerareatrans);


      z-index: 2;
      color: #ffffff80;
      font-size: 10px;

      .row {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 19px;
        // height: calc(var(--01d4bf3d) * 1px);

        height: calc(16.5 * 1px);
        //  height: calc(v-bind(xroll) * 1px);

        span {
          // line-height: calc(var(--01d4bf3d) * 1px);
          line-height: calc(16.5 * 1px);
          //line-height: calc(v-bind(xroll) * 1px);
        }

        .center-line {
          width: 20px;
          border-bottom: 1px solid #d8d8d8;
        }
      }

    }

    .scale {
      position: absolute;
      left: 8px;
      top: 0;
      width: 116px;
      height: 41px;
      z-index: 2;
      overflow: hidden;
      transform: rotate(calc(v-bind(ybpscaledeg)* -1deg));
      // transform: rotate(calc(var(--3318f05b) * -1deg));
      // transform: rotate(calc(0* -1deg));
      transform-origin: 58px 66px;



    }
  }

  .arrow {
    display: flex;
    align-items: center;
    position: absolute;
    left: 50%;
    top: 32px;
    transform: translate(-50%, -50%);
    z-index: 4;
  }

  .aim {
    display: flex;
    align-items: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -20%);
    z-index: 3;
  }
}
</style>
